<template>
    <div class="teacher">
        <div class="head border-radius bg-fff p-1 d-flex between">
            <div class="ipt"></div>
            <Button type="primary" icon="ios-add-circle-outline" @click="add">添加</Button>
        </div>
        <div class="content mt-1">
            <Table :columns="columns" class="diy_table" :data="list"></Table>
            <div class="clearfix mt-2">
                <Page :current.sync="filters.page" :page-size="filters.list_rows" :total="total_page" show-sizer class="float-right" show-total @on-change="getList_page"/>
            </div>
        </div>
        <Modal v-model="modalShow" :title="~updateIndex?'修改教师':'新增教师'"  @on-ok="save" class-name="diy-modal">
            <Form :model="user" :label-width="80">
                <FormItem label="教号">
                    <Input v-model="user.no" class="w-300" ></Input>
                </FormItem>
                <FormItem label="姓名">
                    <Input v-model="user.name" class="w-300"></Input>
                </FormItem>
                <FormItem label="密码">
                    <Input v-model="user.pwd" class="w-300"></Input>
                </FormItem>
                <FormItem label="性别">
                    <RadioGroup v-model="user.sex">
                        <Radio :label="1">男</Radio>
                        <Radio :label="0">女</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import pageMixin from "@/common/pageMixin"
import {teacher_list,tearcher_add,teacher_edit} from "@/common/tapi"
export default {
    mixins:[pageMixin],
    data(){
        return {
            updateIndex:-1,
            user:{
                no:'',
                name:'',
                pwd:'',
                sex:1
            },
            modalShow:false,
            columns:[
                {
                    title:'教号',
                    key:'no'
                },
                {
                    title: '姓名',
                    key: 'name',
                    render:(h,params)=>{
                        return h('div',[
                            h('span',params.row.name),
                            h('Icon',{
                                props:{
                                    type:`md-${params.row.sex?'':'fe'}male`,
                                    size:'12',
                                    color:params.row.sex?'#3295CE':'#D5628D'
                                },
                                style:{
                                    marginLeft:'6px'
                                }
                            })
                        ])
                    }
                },
                {
                    title: '整体评价',
                    width:180,
                    render: (h, params) => {
                        return h('Rate',{
                            props:{
                                disabled:true,
                                value:+params.row.score['整体评价'],
                                allowHalf:params.row.score['整体评价']%1>=0.5
                            } 
                        });
                    }
                },
                {
                    title: '操作',
                    width:400,
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',{
                                props:{
                                    type:'primary',
                                    ghost:true
                                },
                                class:'mr-1',
                                on:{
                                    click:()=>{
                                        this.updateIndex=params.index
                                        this.user={
                                            id:params.row.id,
                                            no:params.row.no,
                                            name:params.row.name,
                                            sex:params.row.sex
                                        }
                                        this.modalShow=true
                                    }
                                }
                            },'编辑'),
                            h('Button',{
                                props:{
                                    type:'error',
                                    ghost:true
                                },
                                on:{
                                    click:()=>{
                                       this.$Modal.confirm({
                                            title: '提示',
                                            content: `确认删除${params.row.name}吗？`,
                                            onOk: () => {
                                                this.getList()
                                            }
                                        });
                                    }
                                }
                            },'删除')
                        ])
                    }
                }
            ],
            list:[ ]
        }
    },
    methods:{
        add(){
            this.user={
                no:'',
                name:'',
                sex:'',
                pwd:'',
            }
            this.updateIndex=-1
            this.modalShow=true
        },
        getList(){
            teacher_list(this.filters)
            .then(res=>{
                if(res){
                    this.list=res.data.list
                    this.total_page=res.data.pageinfo.total
                }
            })
        },
        save(){
            const func=~this.updateIndex?teacher_edit:tearcher_add
            this.user.pwd=this.user.pwd || ''
            func(this.user)
            .then(res=>{
                if(res){
                    this.$Notice.success({
                        title: '成功',
                        desc: '提交成功'
                    });
                    this.getList()
                }
            })
        }
    },
    created(){
        this.getList_page()
    }
}
</script>
